<template>
    <div class="detail">
      <!-- <ImagePreview :src="bseUrlflag+encodeURIComponent(form.pictureFile)" class="img" v-if="form.flag&&form.flag=='8'"></ImagePreview> -->
      <ImagePreview :src="baseUrl+form.pictureFile" class="img"></ImagePreview>
      <div style="padding-left: 50px;width: 35%;">
        <p style="font-size: 22px;font-weight: bold;color: #333;">
          <el-tooltip effect="customized" :content="form.meansName" placement="top-end">
                      <span class="ellipsis">{{ form.meansName }}</span>
          </el-tooltip>
        </p>
        <p><span>成图编号：</span> {{ form.number }}</p>
        <p><span>成果图类型：</span>{{ form.type=='0'?'断层分布图':'地震构造图' }}</p>
        <p style="display: flex;width: 100%;"><span style="display: inline-block;width: 60px;margin-right: 0px;">关键词：</span>
          <div style="width: calc(100% - 60px);">
                  <template v-if="form.keyword">
                    <el-tooltip effect="customized" :content="form.keyword" placement="top-end">
                      <span>
                        <el-space wrap :size="15">
                          <el-tag effect="plain" v-for="key in form.keyword.split(',')">{{key}}</el-tag>
                        </el-space>
                      </span>
                  </el-tooltip>
                </template>
                <template v-else>
                  <span style="margin-left: 15px;color: #666;">无</span>
                </template>
          </div>
        </p>
        <p style="display: flex;width: 100%;"><span style="display: inline-block;width: 80px;">空间位置：</span>{{!!form.arr&&form.arr.join('')}}</p>
        <p><span>生产日期：</span> {{ form.plotTime }}</p>
        <p><span>制图单位：</span> {{ form.draftingUnit }}</p>
        <p><span>发布单位：</span> {{ form.publishingUnit }}</p>
        <p v-if="!form.remark"><span>备注：</span></p>
        <p v-else>
          <el-tooltip effect="customized" :content="form.remark" placement="bottom-end">
                      <span class="ellipsis">备注：{{ form.remark }}</span>
          </el-tooltip>
        </p>
        <p v-if="!form.notes"><span>备注1：</span></p>
        <p v-else>
          <el-tooltip effect="customized" :content="form.notes" placement="bottom-end">
                      <span class="ellipsis">备注1：{{ form.notes }}</span>
          </el-tooltip>
        </p>
        <p><el-button type="primary" @click="handleDown(form)">下载</el-button></p>
      </div>
    </div>
</template>
  
<script setup name="activeFaultDetail">
import { detail } from '@/api/thematicMap/probeClass/activeFault';
import {checkPermi} from "@/utils/permissionBtn"
const route = useRoute();
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=";
const bseUrlflag = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=";
const form = ref({})

// 单条信息
function getDetail(id) {
  detail(id).then(res => {
    form.value = res.data;
    form.value.arr = [];
    let arrAre = [form.value.province,form.value.city,form.value.county]
    if([...new Set(arrAre)].includes('全部')){
        const str = new Set(arrAre)
        str.delete('全部')
        form.value.arr = [...str]
    }else{
        form.value.arr = [...new Set(arrAre)]
    }
  })
}

// 下载文件
function handleDown(form) {
  let flag = true;
  flag = checkPermi(form.flag,'dowon')
  if(!flag){
    proxy.$modal.msgWarning("暂无权限下载");
    return;
  }
  var query = {
    attachId: form.pictureFile,
    name: form.pictureFileAtt[0].attachName
  }
  location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
}

getDetail(route.query.id)
</script>
  
<style scoped lang="scss">
.detail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 30px;
  overflow-x: auto;

  .img {
    width: 70%;
    height: 450px;
    float: left;
  }

  .ellipsis{
    width: 100%;
    display: inline-block;
    overflow:hidden; 
    white-space:nowrap;
    text-overflow:ellipsis; 
  }

  p {
    margin: 20px 0px;
    color: #666;
  }
  .el-tag{
    color: #107ce5;
    border-color: #107ce5;
  }
}
</style>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
	background: #dddfe5;
}

.el-popper.is-customized .el-popper__arrow::before {
	background: #dddfe5;
}
</style>
  
  